<template>
  <div class="blog-container">
    <Layouts>
      <div class="main" ref="mainContainer">
        <ul class="article-list">
          <li
            class="lists-item"
            v-for="(item, index) in ArticleLists.rows"
            :key="item?.id"
          >
            <ArticleItem
              :handleDes="handleDes"
              :handleSelect="handleSelect"
              :data="item"
            ></ArticleItem>
          </li>
          <Empty
            v-if="!ArticleLists.rows?.length"
            :title="emptyContent.title"
            :content="emptyContent.content"
          />
        </ul>
        <div class="page-container">
          <Pager
            :handleChangePage="handleChangePage"
            :current="pageInfos.page"
            :limit="pageInfos.limit"
            :total="ArticleLists.total"
          ></Pager>
        </div>
        <Loading v-if="isLoading" :src="LoadsSrc" />
      </div>
      <template #right>
        <div class="Aside">
          <ArticleType
            :data="ArticleTypeList"
            :total="ArticleLists.blogTotal"
            :handleSelect="handleSelect"
          />
        </div>
      </template>
    </Layouts>
  </div>
</template>

<script setup>
import { watch, ref, onBeforeMount, reactive, onMounted, onBeforeUnmount } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getBlogLists, getBlogType, updateByIdBlogs } from "@/api/blog.js";
import Pager from "@/components/Pager/index.vue";
import Layouts from "@/Layouts/index.vue";
import ArticleItem from "./components/AriticleItem/index.vue";
import ArticleType from "./components/ArticleType/index.vue";
import Loading from "@/components/Loading/index.vue";
import LoadsSrc from "@/assets/loading.svg";
import Empty from "@/components/Empty/index.vue";
import Scroll from "@/composition/Scroll.js";

const ArticleLists = ref({});
const ArticleTypeList = ref([]);
const mainContainer = ref(null);
const isLoading = ref(false);
const router = useRouter();
const route = useRoute();
const emptyContent = reactive({
  title: "暂无文章",
  content:
    "抱歉，我们的文章库暂时未收录符合该分类的内容。请您静候时机，我们会在后续的更新中，为广大读者带来更加优质、丰富的阅读体验。感谢您的关注和支持！",
});
const pageInfos = reactive({
  page: 1,
  limit: 5,
});

// 数据请求
async function fetchData() {
  isLoading.value = true;
  const page = route.query.page || pageInfos.page;
  const limit = route.query.limit || pageInfos.limit;
  const categoryId = route.params.categoryId || "";
  ArticleLists.value = await getBlogLists({ page, limit, categoryId });
  ArticleTypeList.value = await getBlogType();
  isLoading.value = false;
}

// 修改页面要做的事情
function handleChangePage(newPage) {
  pageInfos.page = newPage;
  router.push({
    query: {
      page: pageInfos.page,
      limit: pageInfos.limit,
    },
  });
  mainContainer.value.scrollTop = 0;
}

//挂载前数据请求
onBeforeMount(async () => {
  await fetchData();
});

// 滚动绑定
Scroll(mainContainer);

// 类型切换
function handleSelect(typeId) {
  router.push({
    query: {
      page: 1,
      limit: pageInfos.limit,
    },
    path: `/article/cata/${typeId}`,
  });
  fetchData();
}

// 获取详情，更新观看人数
async function handleDes(data) {
  await updateByIdBlogs(data.id, {
    scanNumber: data.scanNumber + 1,
  });
  router.push({
    path: `/article/${data.id}`,
  });
}

// 监听路由
watch(
  () => route.fullPath,
  async () => {
    await fetchData();
  }
);
</script>

<style lang="less" scoped>
@import url("@/style/var.less");

.blog-container {
  width: 100%;
  height: 100%;

  .main {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: auto;
    line-height: 1.7;
    padding: 20px;
    scroll-behavior: smooth;
    box-sizing: border-box;

    .article-list {
      width: 100%;

      .lists-item {
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid @gray;
        padding: 20px;
      }
    }
  }

  .Aside {
    width: 300px;
    height: 100%;
    overflow: auto;
  }
}
</style>
